<template>
	<view class="home-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content">
				<text class="greeting">{{ greeting }}</text>
				<text class="date">{{ currentDate }}</text>
			</view>
		</view>
		
		<!-- 主要内容区域 -->
		<scroll-view class="main-content" scroll-y="true">
			<!-- 今日情绪打卡区 -->
			<view class="mood-checkin card fade-in">
				<view class="card-header">
					<text class="card-title">今日心情</text>
					<text class="card-subtitle">记录此刻的感受</text>
				</view>
				
				<view class="mood-options">
					<view 
						class="mood-item" 
						v-for="(mood, index) in moodOptions" 
						:key="index"
						:class="{ active: selectedMood === mood.value }"
						@tap="selectMood(mood.value)"
					>
						<text class="mood-emoji">{{ mood.emoji }}</text>
						<text class="mood-label">{{ mood.label }}</text>
					</view>
				</view>
				
				<button class="checkin-btn" @tap="saveMoodCheckin" v-if="selectedMood">
					完成打卡
				</button>
			</view>
			
			<!-- 情绪趋势图入口 -->
			<view class="trend-card card fade-in" @tap="goToMoodTrend">
				<view class="trend-header">
					<text class="trend-title">情绪趋势</text>
					<text class="trend-subtitle">查看7天变化</text>
				</view>
				<view class="trend-chart">
					<view class="chart-placeholder">
						<text class="chart-text">📈 点击查看详细趋势</text>
					</view>
				</view>
			</view>
			
			<!-- 快速测评入口 -->
			<view class="quick-test card fade-in">
				<view class="card-header">
					<text class="card-title">快速测评</text>
					<text class="card-subtitle">了解当前状态</text>
				</view>
				
				<view class="test-options">
					<view class="test-item" @tap="goToTest('anxiety')">
						<view class="test-icon">😰</view>
						<text class="test-name">焦虑测试</text>
						<text class="test-desc">GAD-7量表</text>
					</view>
					
					<view class="test-item" @tap="goToTest('stress')">
						<view class="test-icon">😤</view>
						<text class="test-name">压力指数</text>
						<text class="test-desc">压力评估</text>
					</view>
					
					<view class="test-item" @tap="goToTest('sleep')">
						<view class="test-icon">😴</view>
						<text class="test-name">睡眠质量</text>
						<text class="test-desc">睡眠评估</text>
					</view>
				</view>
			</view>
			
			<!-- 今日建议 -->
			<view class="suggestion card fade-in">
				<view class="card-header">
					<text class="card-title">今日建议</text>
					<text class="card-subtitle">AI为你推荐</text>
				</view>
				
				<view class="suggestion-content">
					<text class="suggestion-text">{{ todaySuggestion }}</text>
				</view>
				
				<button class="suggestion-btn" @tap="refreshSuggestion">
					换一个建议
				</button>
			</view>
			
			<!-- 底部间距 -->
			<view class="bottom-space"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				selectedMood: '',
				moodOptions: [
					{ value: 'happy', emoji: '😊', label: '开心' },
					{ value: 'calm', emoji: '😌', label: '平静' },
					{ value: 'sad', emoji: '😢', label: '难过' },
					{ value: 'angry', emoji: '😠', label: '愤怒' },
					{ value: 'anxious', emoji: '😰', label: '焦虑' }
				],
				suggestions: [
					'深呼吸三次，让心情平静下来',
					'出门走走，感受大自然的美好',
					'听一首喜欢的音乐，放松心情',
					'写下今天的三件好事',
					'给朋友发个消息，分享快乐',
					'做一些简单的伸展运动',
					'喝一杯温水，关爱自己',
					'整理房间，让环境更舒适'
				],
				todaySuggestion: ''
			}
		},
		computed: {
			greeting() {
				const hour = new Date().getHours()
				if (hour < 12) return '早上好'
				if (hour < 18) return '下午好'
				return '晚上好'
			},
			currentDate() {
				const now = new Date()
				const month = now.getMonth() + 1
				const date = now.getDate()
				const weekdays = ['日', '一', '二', '三', '四', '五', '六']
				const weekday = weekdays[now.getDay()]
				return `${month}月${date}日 星期${weekday}`
			}
		},
		onLoad() {
			this.getSystemInfo()
			this.initTodaySuggestion()
			this.loadTodayMood()
		},
		onShow() {
			// 页面显示时刷新数据
			this.loadTodayMood()
		},
		methods: {
			getSystemInfo() {
				const systemInfo = uni.getSystemInfoSync()
				this.statusBarHeight = systemInfo.statusBarHeight || 0
			},
			
			initTodaySuggestion() {
				// 基于日期生成固定的建议，确保同一天显示相同建议
				const today = new Date().toDateString()
				const savedSuggestion = uni.getStorageSync(`suggestion_${today}`)
				
				if (savedSuggestion) {
					this.todaySuggestion = savedSuggestion
				} else {
					this.refreshSuggestion()
				}
			},
			
			refreshSuggestion() {
				const randomIndex = Math.floor(Math.random() * this.suggestions.length)
				this.todaySuggestion = this.suggestions[randomIndex]
				
				// 保存今日建议
				const today = new Date().toDateString()
				uni.setStorageSync(`suggestion_${today}`, this.todaySuggestion)
			},
			
			loadTodayMood() {
				const today = new Date().toDateString()
				const todayMood = uni.getStorageSync(`mood_${today}`)
				if (todayMood) {
					this.selectedMood = todayMood
				}
			},
			
			selectMood(mood) {
				this.selectedMood = mood
			},
			
			saveMoodCheckin() {
				if (!this.selectedMood) return
				
				const today = new Date().toDateString()
				const timestamp = new Date().getTime()
				
				// 保存今日心情
				uni.setStorageSync(`mood_${today}`, this.selectedMood)
				
				// 保存到心情历史记录
				let moodHistory = uni.getStorageSync('mood_history') || []
				
				// 检查今天是否已经记录
				const todayIndex = moodHistory.findIndex(item => item.date === today)
				
				const moodRecord = {
					date: today,
					mood: this.selectedMood,
					timestamp: timestamp
				}
				
				if (todayIndex >= 0) {
					// 更新今天的记录
					moodHistory[todayIndex] = moodRecord
				} else {
					// 添加新记录
					moodHistory.unshift(moodRecord)
				}
				
				// 只保留最近30天的记录
				if (moodHistory.length > 30) {
					moodHistory = moodHistory.slice(0, 30)
				}
				
				uni.setStorageSync('mood_history', moodHistory)
				
				uni.showToast({
					title: '打卡成功！',
					icon: 'success'
				})
			},
			
			goToMoodTrend() {
				uni.navigateTo({
					url: '/pages/mood/mood'
				})
			},
			
			goToTest(type) {
				uni.navigateTo({
					url: `/pages/test/${type}`
				})
			}
		}
	}
</script>

<style scoped>
	.home-container {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient(135deg, #F5F7FA 0%, #C3CFE2 100%);
	}
	
	.custom-navbar {
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(10px);
		border-bottom: 1rpx solid rgba(224, 224, 224, 0.3);
	}
	
	.navbar-content {
		padding: 20rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.greeting {
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
		margin-bottom: 8rpx;
	}
	
	.date {
		font-size: 24rpx;
		color: #666666;
	}
	
	.main-content {
		flex: 1;
		padding: 20rpx;
	}
	
	.card {
		background: white;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		padding: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
	}
	
	.card-header {
		margin-bottom: 30rpx;
	}
	
	.card-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.card-subtitle {
		font-size: 26rpx;
		color: #666666;
		display: block;
	}
	
	/* 心情打卡样式 */
	.mood-options {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		flex-wrap: wrap;
		gap: 20rpx;
	}
	
	.mood-item {
		flex: 1;
		min-width: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 10rpx;
		border-radius: 16rpx;
		background: #F8F9FA;
		transition: all 0.3s ease;
	}
	
	.mood-item.active {
		background: linear-gradient(135deg, #4CAF50, #81C784);
		transform: scale(1.05);
	}
	
	.mood-emoji {
		font-size: 48rpx;
		margin-bottom: 12rpx;
	}
	
	.mood-label {
		font-size: 24rpx;
		color: #666666;
	}
	
	.mood-item.active .mood-label {
		color: white;
		font-weight: 500;
	}
	
	.checkin-btn {
		width: 100%;
		background: linear-gradient(135deg, #4CAF50, #81C784);
		color: white;
		border: none;
		border-radius: 50rpx;
		padding: 28rpx 0;
		font-size: 32rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
	}
	
	/* 趋势图样式 */
	.trend-card {
		background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
	}
	
	.trend-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.trend-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1976D2;
	}
	
	.trend-subtitle {
		font-size: 24rpx;
		color: #1976D2;
		opacity: 0.7;
	}
	
	.chart-placeholder {
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 12rpx;
	}
	
	.chart-text {
		font-size: 28rpx;
		color: #1976D2;
	}
	
	/* 快速测评样式 */
	.test-options {
		display: flex;
		gap: 20rpx;
		flex-wrap: wrap;
	}
	
	.test-item {
		flex: 1;
		min-width: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 20rpx;
		background: #F8F9FA;
		border-radius: 16rpx;
		transition: all 0.3s ease;
	}
	
	.test-item:active {
		transform: scale(0.95);
		background: #E9ECEF;
	}
	
	.test-icon {
		font-size: 48rpx;
		margin-bottom: 16rpx;
	}
	
	.test-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 8rpx;
	}
	
	.test-desc {
		font-size: 22rpx;
		color: #666666;
	}
	
	/* 建议样式 */
	.suggestion-content {
		background: #FFF3E0;
		padding: 30rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		border-left: 6rpx solid #FF9800;
	}
	
	.suggestion-text {
		font-size: 28rpx;
		color: #E65100;
		line-height: 1.6;
	}
	
	.suggestion-btn {
		background: #FF9800;
		color: white;
		border: none;
		border-radius: 50rpx;
		padding: 20rpx 40rpx;
		font-size: 26rpx;
		font-weight: 500;
	}
	
	.bottom-space {
		height: 120rpx;
	}
	
	/* 响应式适配 */
	@media screen and (max-width: 750rpx) {
		.mood-options {
			gap: 15rpx;
		}
		
		.mood-item {
			min-width: 100rpx;
			padding: 15rpx 8rpx;
		}
		
		.test-options {
			flex-direction: column;
		}
		
		.test-item {
			min-width: auto;
		}
	}
</style>
